<template>
  <!-- <ul class="list">
    <li v-for="item in list" :key="item.id">
      <router-link :to="{path:'detail/'+item.id}">
        <img :src="'https://images.weserv.nl?url='+item.images.small" />
        <div class="info">
          <h3>{{item.title}}</h3>
          <p>豆瓣评分：{{item.rating.average}}</p>
          <p>
            <span v-for="(tag,index) in item.genres" :key="index" class="tag">{{tag}}</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>-->
  <FilmItem :list="list" />
</template>

<script>
import { mapActions, mapState } from "vuex";
import FilmItem from "@/components/FilmItem.vue";
export default {
  components: {
    FilmItem
  },
  methods: {
    ...mapActions([
      "getListData" //also supports payload `this.nameOfAction(amount)`
    ])
  },
  computed: {
    ...mapState(["list"])
  },
  created() {
    this.getListData();
    // this.$store.dispatch("getListData");
  }
};
</script>

<style lang="less" scoped>
</style>